<template>
  <div>
    <van-search v-model="searchValue" placeholder="请输入搜索关键词" shape="round" />
    <div class="search-wrap" v-if="resultList.length === 0">
      <p class="hot_title">热门搜索</p>
      <ul class="hot_name_wrap">
        <li class="hot_item" v-for="(obj, index) in hotList" :key="index" @click="btn(obj.first)">
          {{ obj.first }}
        </li>
      </ul>
    </div>
    <!-- 搜索结果 -->
    <div class="hot_search" v-else>
      <p class="hot_title  search-wrap">最佳匹配</p>
      <SongItem v-for="obj in resultList" :key="obj.id" :name="obj.name" :author="obj.ar[0].name" :id="obj.id">
      </SongItem>
    </div>


  </div>
</template>

<script>
import { hotSearchAPI, searchResultAPI } from '@/api/'
import SongItem from '@/components/SongItem.vue'
export default {
  data() {
    return {
      searchValue: '',
      hotList: [],
      resultList: [],
      timer: null
    }
  },
  async created() {
    const res = await hotSearchAPI()
    console.log(res);
    this.hotList = res.data.result.hots
  },
  methods: {
    async btn(str) {
      this.searchValue = str
      const res = await searchResultAPI({
        type: 1,
        keywords: this.searchValue
      })
      this.resultList = res.data.result.songs;
      setTimeout(() => {
        clearTimeout(this.timer)
      })
    }
  },
  watch: {
    searchValue(val) {
      clearTimeout(this.timer)
      if (val.length === 0) return this.resultList = []
      this.timer = setTimeout(async () => {
        const res = await searchResultAPI({
          type: 1,
          keywords: val
        })
        this.resultList = res.data.result.songs;
      }, 2000)


    }
  }, components: {
    SongItem
  }
}
</script>

<style scoped>
.van-cell {
  font-size: 14px;
}

.search-wrap {
  padding: 0.266667rem;
}

.hot_title {
  font-size: 0.32rem;
  color: #666;
}

.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

.van-cell {
  font-size: 17px;
}
</style>